遊戲活動關卡查詢網站Day18-我的最愛1(LocalStorage)

2025 iThome 鐵人賽

DAY 18

Vue.js

遊戲活動關卡查詢網站系列第 18 篇

17th鐵人賽

jack1234552000

2025-08-29 01:47:31

92 瀏覽

分享至

在做這個主題之前，想到不久前爆紅的歌曲

你最喜歡的是什麼呢?
你最愛的是什麼呢?
何が好き？
みんな! 何が好き?

讓我們將喜歡的資訊存起來，下次打開時能看到
我們這邊就實作「我的最愛」功能吧!

目標
在上一篇總算完成了敵人資訊
這篇主要做的是，在敵人資訊中加入「我的最愛」
按下後，就會將結果儲存至「我的最愛」(F區塊)
每次重新整理網站後，這個紀錄依然存在
這就是我們一般在網站上看到的瀏覽紀錄
除非你手動將它清除。

步驟
1.
在A區塊的每個Stage裡頭加上一個愛心
這邊我們不做太完整、複雜的功能
僅僅只是簡單提醒使用者「有把資料加到最愛了」這件事情
按下空白愛心後，會變成實體愛心

首先，我們因為有裝Bootstrap
所以這邊會再用到它的icon元件
回到Node.js command prompt 輸入

npm install bootstrap-icons

接著在main.js 引入

import "bootstrap-icons/font/bootstrap-icons.css"

並將它加到Template裡

<template>
//以上略
   <i class="bi bi-heart"></i>
</template>

這會是我們這次要用的圖案
接下來要做幾個動作
●點圖案會有提示訊息
●接著存進瀏覽紀錄
●瀏覽紀錄能看到資料

補上圖案需要的屬性和其他事件
點下愛心後，出現提示訊息，並變成實體愛心

<script>
//...中間省略
const favoriteAdded = ref({});
function addFavorite(e){

	favoriteAdded.value[e] = true;
	alert("已加至我的最愛列表");

}
function favoriteStyle(e){

	const result = {
		"bi fs-1":true,
		"bi-heart-fill text-danger" : false,
		"bi-heart":true
	}
	
	if(favoriteAdded.value[e]){
		result["bi-heart-fill text-danger"] = true;
		result["bi-heart"] = false;
	}
	return result;

}
</script>

<template>
//..中間省略

<i :class="favoriteStyle(msg.actionNo + msg.eventNo + msg.stagePrimaryNo + msg.stageSecNo + item.stageOrder  )" 
					@click="addFavorite(msg.actionNo + msg.eventNo + msg.stagePrimaryNo + msg.stageSecNo + item.stageOrder)"></i>
</template>

LocalStorage是本地端瀏覽器存取資料的一個機制
因為資料量小，瀏覽紀錄存取機制多數會靠這種方法

接下來要做的是，當愛心按下後，會存到瀏覽紀錄
因為LocalStorage 初始是沒有設定的
要載入LocalStorage 要先做新建的動作
所以我們這邊自動載入時要判斷;
另外還要加上favoriteList 這個ref
等一下我們也會用到

<script setup>
//....以上略
const favoriteList = ref([]);

//若LocalStorage無資料 就新建
//若LocalStorage無資料 就新建
onMounted(() => {
  
  if (localStorage.getItem("favoriteList") == null) {
	console.log("建立最愛列表");
    localStorage.setItem("favoriteList", [])
  }
  else{
	favoriteList.value = JSON.parse(localStorage.getItem("favoriteList"))
  }
})
</script>

按下愛心後，愛心攜帶的資料
就要存到favoriteList這個ref
我們在底下script再新增程式架構如下;
這邊就會簡單實現
●按下愛心後，透過addItem() 判斷是否重複
若無重複則加到favoriteList
●而watch負責監聽favoriteList
若有變化就更新localStorage的值

<script setup>
//...以上略
watch(favoriteList, (newVal) => {
  localStorage.setItem("favoriteList", JSON.stringify(newVal));
},{ deep: true }); 


//加入我的最愛列表
function addItem(item){

	const exists = favoriteList.value.some(x => x.rrn == item.rrn);
	
	if(exists){
		console.log("已儲存");
	}
	else{
		favoriteList.value.push(item);
		console.log("已加至我的最愛列表");
	}
}
</script>

將favoriteList印在畫面上看一下